<template>
  <div id="doInbound">
    <el-row>
      <el-button type="primary" icon="el-icon-circle-plus-outline" @click="save">保存添加</el-button>
      <el-button icon="el-icon-refresh-right" @click="resetQueryForm">重置</el-button>
      <el-button type="warning" icon="el-icon-back" @click="backTo">返回</el-button>
    </el-row>
    <el-row style="margin-top: 10px">
      <el-form :inline="true" :rules="inboundFormRules" ref="inboundForm" :model="saveOrEditData.inbound">
        <el-form-item label="入库仓库" prop="warehouseID">
          <el-select style="width: 100%" v-model="saveOrEditData.inbound.warehouseID" @change="warehouseChange" filterable clearable placeholder="请选择入库仓库">
            <el-option
              v-for="item in warehouseListData"
              :key="item.warehouseID"
              :label="item.name"
              :value="item.warehouseID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入库人" prop="userID">
          <el-select style="width: 100%" v-model="saveOrEditData.inbound.userID" @change="userChange" filterable clearable placeholder="请选择入库仓库">
            <el-option
              v-for="item in userListData"
              :key="item.staffID"
              :label="item.name"
              :value="item.staffID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="comment">
          <el-input
            show-word-limit
            maxlength="150"
            type="textarea"
            :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="如需备注输入描述"
            v-model="saveOrEditData.inbound.comment"
          ></el-input>
        </el-form-item>
      </el-form>
    </el-row>
    <!-- 添加入库物资  -->
    <el-row>
      <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addRecord">添加物资</el-button>
    </el-row>
    <el-row style="margin-top: 10px">
      <el-table :data="saveOrEditData.recordList" border style="width: 100%">
        <el-table-column prop="name" label="物资名称"></el-table-column>
        <el-table-column prop="assificationName" label="物资分类"></el-table-column>
        <el-table-column prop="modelName" label="物资型号">
          <template slot-scope="scope">
            <span v-if="scope.row.modelName">{{ scope.row.modelName }}</span>
            <el-tag v-else type="danger">未关联型号</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="warehouseName" label="所在仓库"></el-table-column>
        <el-table-column prop="wmsCount" label="台账数量" width="120">
          <template slot-scope="scope">
            <el-tag type="success">{{ scope.row.wmsCount + scope.row.uniName}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center" width="180">
          <template slot-scope="scope">
            <el-button @click="rowDelete(scope.row)" type="danger" icon="el-icon-delete" size="small" circle title="删除"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <!-- 添加物资抽屉 -->
    <el-drawer
      title="添加物资"
      :visible.sync="dialog.addRecord"
      direction="rtl"
      size="70%"
      :close-on-press-escape="false"
      :show-close="false"
      :wrapperClosable="false"
      >
      <el-form ref="recordForm" :rules="recordRules" :model="tempRecord" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="物资名称" prop="name">
              <el-input show-word-limit v-model="tempRecord.name" placeholder="请输入物资名称" maxlength="20"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入库仓库" prop="warehouseID">
              <el-input disabled="disabled" v-model="tempRecord.warehouseName" ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="物资分类" prop="assificationID">
              <el-select style="width: 100%" v-model="tempRecord.assificationID" @change="wmsTypeChange" filterable clearable placeholder="请选择物资分类">
                <el-option
                  v-for="item in classificationListData"
                  :key="item.classificationID"
                  :label="item.name"
                  :value="item.classificationID">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="物资型号" prop="modelID">
              <el-select style="width: 100%" v-model="tempRecord.modelID" @change="wmsTypeModelChange" filterable clearable placeholder="先选择分类后再选择型号">
                <el-option
                  v-for="item in modelListData"
                  :key="item.modelID"
                  :label="item.name"
                  :value="item.modelID">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="计量单位" prop="uniCode">
              <gd_param type="select"
                        paramCode="unit"
                        placeholder="请选择计量单位"
                        @selectChange="unitTypeChange"
                        v-model="tempRecord.uniCode" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="入库数量" prop="wmsCount">
              <el-input type="number" show-word-limit v-model="tempRecord.wmsCount" placeholder="请输入入库数量" maxlength="10"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="备注" prop="comment">
              <el-input
                show-word-limit
                maxlength="150"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4 }"
                placeholder="如需备注输入描述"
                v-model="tempRecord.comment"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="物资照片1">
              <gd_file v-if="dialog.addRecord"
                :fileID="tempRecord.fileID1"
                @uploadSuccess="recordFile1UploadSuccess"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="物资照片2">
              <gd_file v-if="dialog.addRecord"
                :fileID="tempRecord.fileID2"
                @uploadSuccess="recordFile2UploadSuccess"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="物资照片3">
              <gd_file v-if="dialog.addRecord"
                :fileID="tempRecord.fileID3"
                @uploadSuccess="recordFile3UploadSuccess"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px">
          <!-- 按钮组 -->
            <el-button type="primary" @click="doSaveRecord" :loading="formLoading">确定添加</el-button>
            <el-button
              @click="closeRecord"
            >
              取消
            </el-button>
        </el-row>
      </el-form>
    </el-drawer>

  </div>
</template>

<script>
import gd_param from "@/components/mycomponents/gd_param.vue";
import * as recordAPI from '@/api/wms/record.js';
import * as axiosAPI from '@/api/wms/inbound.js';
import gd_file from "@/components/mycomponents/gd_file.vue";

import * as wmsTypeAPI from '@/api/wms/classification.js';
import * as wmsTypeModelAPI from '@/api/wms/classificationModel.js';
import * as warehouseAPI from '@/api/wms/warehouse.js';
import * as staffAPI from '@/api/staff.js';

export default {
  name: 'doInbound',
  components:{gd_param,gd_file},
  data() {
    return {
      formLoading:false,
      // 弹窗数据
      dialog:{
        addRecord:false
      },
      // 临时保存物资台账数据
      tempRecord:{
        recordID: null,
        comment: null,
        name: null,
        code: null,
        assificationID: null,
        assificationName: null,
        modelID: null,
        modelName: null,
        uniCode: null,
        uniName: null,
        wmsCount: 0,
        warehouseID: null,
        warehouseName: null,
        fileID1:null,
        fileUrl1:null,
        fileID2:null,
        fileUrl2:null,
        fileID3:null,
        fileUrl3:null
      },
      // 要保存的数据
      saveOrEditData:{
        inbound:{
          inboundID: null,
          comment: null,
          name: null,
          code: null,
          userID: null,
          userName: null,
          warehouseID: null,
          warehouseName: null
        },
        recordList:[]
      },
      // 仓库列表
      warehouseListData:[],
      // 物资分类
      classificationListData:[],
      // 物资型号
      modelListData:[],
      // 用户列表
      userListData:[],
      // 出库单-表单校验
      inboundFormRules:{
        userID: { required: true, message: '请选择入库人', trigger: 'change' },
        warehouseID: { required: true, message: '请选择仓库', trigger: 'change' },
      },
      // 新增物资-表单校验
      recordRules:{
        name: { required: true, message: '请输入物资名称', trigger: 'blur' },
        warehouseID: { required: true, message: '请选择仓库', trigger: 'change' },
        assificationID: { required: true, message: '请选择物资分类', trigger: 'change' },
        uniCode: { required: true, message: '请选择计量单位', trigger: 'change' },
        wmsCount: { required: true, message: '请输入入库数量', trigger: 'blur' },
        userID: { required: true, message: '请选择入库操作人', trigger: 'change' }
      }
    };
  },
  mounted() {
    this.initWarehouseListData();
    this.initClassificationListData();
    this.initUserListData();
  },
  methods: {
    // 查询用户列表
    initUserListData(){
      var _this = this;
      staffAPI.list({"name":null,"tellNumber":null})
        .then(function(res){
          if(res.code == "0000"){
            _this.userListData = res.data;
          }
        });
    },
    // 查询分类
    initClassificationListData(){
      var _this = this;
      wmsTypeAPI.list()
        .then(function(res){
          if(res.code == "0000"){
            _this.classificationListData = res.data;
          }
        });
    },
    // 查询型号
    initModelListData(id){
      var _this = this;
      if(id){
        wmsTypeModelAPI.list({"classificationID":id})
          .then(function(res){
            if(res.code == "0000"){
              _this.modelListData = res.data;
            }
          });
      }

    },
    // 查询仓库列表
    initWarehouseListData(){
      var _this = this;
      warehouseAPI.list()
        .then(function(res){
          if(res.code == "0000"){
            _this.warehouseListData = res.data;
          }
        });
    },
    // 重置入库单
    resetQueryForm(){
      this.saveOrEditData = {
        inbound:{
          inboundID: null,
          comment: null,
          name: null,
          code: null,
          userID: null,
          userName: null,
          warehouseID: null,
          warehouseName: null
        },
        recordList:[]
      };
      this.tempRecord = {
        recordID: null,
        comment: null,
        name: null,
        code: null,
        assificationID: null,
        assificationName: null,
        modelID: null,
        modelName: null,
        uniCode: null,
        uniName: null,
        wmsCount: 0,
        warehouseID: null,
        warehouseName: null,
        fileID1:null,
        fileUrl1:null,
        fileID2:null,
        fileUrl2:null,
        fileID3:null,
        fileUrl3:null
      }
    },
    // 重置添加物资
    resetRecord(){
      this.tempRecord = {
        recordID: null,
        comment: null,
        name: null,
        code: null,
        assificationID: null,
        assificationName: null,
        modelID: null,
        modelName: null,
        uniCode: null,
        uniName: null,
        wmsCount: 0,
        warehouseID: null,
        warehouseName: null,
        fileID1:null,
        fileUrl1:null,
        fileID2:null,
        fileUrl2:null,
        fileID3:null,
        fileUrl3:null
      }
    },
    // 点击添加物资
    addRecord(){
      this.tempRecord.warehouseID = this.saveOrEditData.inbound.warehouseID;
      this.tempRecord.warehouseName = this.saveOrEditData.inbound.warehouseName;
      this.dialog.addRecord = true;
    },
    // 关闭添加物资
    closeRecord(){
      this.dialog.addRecord = false;
      this.resetRecord();
    },
    // 物资分类选择
    wmsTypeChange(data){
      if(data!=""){
        var resData = null;
        for(var i in this.classificationListData){
          if(this.classificationListData[i].classificationID == data){
            resData = this.classificationListData[i];
            break;
          }
        }
        this.tempRecord.assificationID = resData.classificationID;
        this.tempRecord.assificationName = resData.name;

        // 查询型号
        this.initModelListData(resData.classificationID);
      }else{
        this.tempRecord.assificationID = null;
        this.tempRecord.assificationName = null;

        this.tempRecord.modelID = null;
        this.tempRecord.modelName = null;

        this.modelListData = [];
      }
    },
    // 物资型号选择
    wmsTypeModelChange(data){
      if(data!=""){
        var resData = null;
        for(var i in this.modelListData){
          if(this.modelListData[i].modelID == data){
            resData = this.modelListData[i];
            break;
          }
        }
        this.tempRecord.modelID = resData.modelID;
        this.tempRecord.modelName = resData.name;

        this.tempRecord.uniCode = resData.uniCode;
        this.tempRecord.uniName = resData.uniName;
      }else{
        this.tempRecord.modelID = null;
        this.tempRecord.modelName = null;

        this.tempRecord.uniCode = null;
        this.tempRecord.uniName = null;
      }
    },
    // 计量单位切换
    unitTypeChange(data){
      if(data == undefined){
        this.tempRecord.uniCode = null;
        this.tempRecord.uniName = null;
      }else{
        this.tempRecord.uniCode = data.dataValue;
        this.tempRecord.uniName = data.dataName;
      }
    },
    // 图片上传切换1
    recordFile1UploadSuccess(data){
      if(data.length==0){
        this.tempRecord.fileID1 = null;
        this.tempRecord.fileUrl1 = null;
      }else{
        this.tempRecord.fileID1 = data[0].id;
        this.tempRecord.fileUrl1 = data[0].url;
      }
    },
    // 图片上传切换2
    recordFile2UploadSuccess(data){
      if(data.length==0){
        this.tempRecord.fileID2 = null;
        this.tempRecord.fileUrl2 = null;
      }else{
        this.tempRecord.fileID2 = data[0].id;
        this.tempRecord.fileUrl2 = data[0].url;
      }
    },
    // 图片上传切换3
    recordFile3UploadSuccess(data){
      if(data.length==0){
        this.tempRecord.fileID3 = null;
        this.tempRecord.fileUrl3 = null;
      }else{
        this.tempRecord.fileID3 = data[0].id;
        this.tempRecord.fileUrl3 = data[0].url;
      }
    },
    // 入库单-仓库选择
    warehouseChange(data){
      if(data!=""){
        var resData = null;
        for(var i in this.warehouseListData){
          if(this.warehouseListData[i].warehouseID == data){
            resData = this.warehouseListData[i];
            break;
          }
        }
        this.saveOrEditData.inbound.warehouseID = resData.warehouseID;
        this.saveOrEditData.inbound.warehouseName = resData.name;
        this.tempRecord.warehouseID = resData.warehouseID;
        this.tempRecord.warehouseName = resData.name;
      }else{
        this.saveOrEditData.inbound.warehouseID = null;
        this.saveOrEditData.inbound.warehouseName = null;
        this.tempRecord.warehouseID = null;
        this.tempRecord.warehouseName = null;
      }
    },
    // 入库单-入库人选择
    userChange(data){
      if(data!=""){
        var resData = null;
        for(var i in this.userListData){
          if(this.userListData[i].staffID == data){
            resData = this.userListData[i];
            break;
          }
        }
        this.saveOrEditData.inbound.userID = resData.staffID;
        this.saveOrEditData.inbound.userName = resData.name;
      }else{
        this.saveOrEditData.inbound.userID = null;
        this.saveOrEditData.inbound.userName = null;
      }
    },
    // 保存添加物资
    doSaveRecord(){
      this.$refs.recordForm.validate(valid => {
        if (valid) {
          this.saveOrEditData.recordList.push(this.tempRecord);
          this.closeRecord();
        }
      });

    },
    // 删除物资行数据
    rowDelete(data){
      var delIndex = 0;
      for(var i in this.saveOrEditData.recordList){
        if(this.saveOrEditData.recordList[i].recordID == data.recordID){
          delIndex = i;
          break;
        }
      }
      this.saveOrEditData.recordList.splice(delIndex,1);
    },
    // 保存入库单
    save(){
      this.$refs.inboundForm.validate(valid => {
        if (valid) {
          var _this = this;
          axiosAPI.add(_this.saveOrEditData)
            .then(function(res){
               if(res.code == "0000"){
                  _this.backTo();
               }
            });
        }
      });
    },
    // 返回上一页
    backTo(){
      this.$router.push("/inbound/index");
    }
  }
};
</script>

<style scoped></style>
